<template>
  <view class="my_user">
    <block v-if="!token">
      <view class="notLoggedIn">
        <view class="notLoggedIn_image">
          <image src="../../static/tab_icons/my.png" mode=""></image>
        </view>
        <view class="notLoggedIn_login" @click="toLogin">
          <button>一键登录</button>
        </view>
        <view class="notLoggedIn_title">
          <text>登陆后尽享更多权益</text>
        </view>
      </view>
    </block>
    <block v-else>
      <view class="my_user_top">
        <view class="top-box">
          <view class="top-box_image">
            <image :src="userList.avatarUrl" class="avatar"></image>
          </view>
          <view class="nickname">{{userList.nickName}}</view>
          <view class="my_user_bottom">
            <view class="user_bottom_top">
              <view class="shop">
                <text>8</text>
                <text>收藏的店铺</text>
              </view>
              <view class="list">
                <text>14</text>
                <text>收藏的商品</text>
              </view>
              <view class="follow">
                <text>18</text>
                <text>关注的商品</text>
              </view>
              <view class="footprint">
                <text>84</text>
                <text>足迹</text>
              </view>
            </view>
            <view class="user_bottom_count">
              <view class="count_my_order">
                <text>我的订单</text>
              </view>
              <view class="count_my_icon">
                <view class="icon_obligation">
                  <view class="icon_obligation_box1">
                    <image src="/static/my-icons/icon1.png"></image>
                  </view>
                  <text>待付款</text>
                </view>
                <view class="icon_harvested">
                  <view class="icon_obligation_box2">
                    <image src="/static/my-icons/icon2.png"></image>
                  </view>
                  <text>待收货</text>
                </view>
                <view class="icon_refund_and_return ">
                  <view class="icon_obligation_box3">
                    <image src="/static/my-icons/icon3.png"></image>
                  </view>
                  <text>退款/退货</text>
                </view>
                <view class="icon_all_orders">
                  <view class="icon_obligation_box4">
                    <image src="/static/my-icons/icon4.png"></image>
                  </view>
                  <text>全部订单</text>
                </view>
              </view>
            </view>
            <view class="user_bottom_bottom">
              <view class="bottom_top">
                <text>收获地址</text>
                <uni-icons type="forward" size="20"></uni-icons>
              </view>
              <view class="bottom_count">
                <text>联系客服</text>
                <uni-icons type="forward" size="20"></uni-icons>
              </view>
              <view class="bottom_bottom" @click="exitLogin">
                <text>退出登录</text>
                <uni-icons type="forward" size="20"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        flag: true
      }
    },
    computed: {
      ...mapState('m_cart', ['userList','token'])
    },
    methods: {
      // 点击一键登录
      toLogin() {
        uni.setStorageSync('token','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
        this.$store.commit('m_cart/getUserList')
        this.$store.commit('m_cart/editToken')
        const userToken = uni.getStorageSync('token')
        if (userToken) {
          uni.showToast({
            title: "登录成功"
          })
        }
      },
      // 退出登录
      exitLogin(){
        uni.showModal({
        	title: '提示',
        	content: '您确定退出吗',
        	success: (res)=> {
        		if (res.confirm) {
        			uni.removeStorageSync('token')
              this.$store.state.m_cart.token = ''
        		} else if (res.cancel) {
        			console.log('用户点击取消');
        		}
        	}
        });
      },
    
    }
  }
</script>

<style lang="scss">
  .notLoggedIn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-top: 200rpx;

    .notLoggedIn_image {
      height: 200rpx;
      width: 200rpx;
      border-radius: 50%;
      overflow: hidden;
      background: #ccc;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .notLoggedIn_title {
      width: 100%;
      text-align: center;
      height: 90rpx;
      margin-top: 40rpx;
      font-size: 28rpx;
      color: #D1D1D1;
    }
  }

  .notLoggedIn_login {
    width: 90%;
    margin: 0 auto;
    margin-top: 60rpx;

    button {
      background: red;
      color: white;
      border-radius: 50rpx;
    }
  }

  .my_user_top {
    width: 100%;
    height: 40vh;
    background-color: darkred;

    .top-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .top-box_image {
        width: 200rpx;
        height: 200rpx;
        background: white;
        border-radius: 50%;
        margin-top: 75rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .nickname {
        margin-top: 30rpx;
        color: white;
        font-weight: bold;
      }

      .my_user_bottom {
        width: 100%;

        .user_bottom_top {
          display: flex;
          width: 95%;
          background: white;
          height: 130rpx;
          margin-top: 85rpx;
          margin-left: 20rpx;
          border-radius: 10rpx;

          .shop {
            display: flex;
            flex-direction: column;
            width: 180rpx;
            height: 80rpx;
            text-align: center;
            font-size: 30rpx;
            margin-top: 10px;
            margin-left: 10rpx;
          }

          .list {
            display: flex;
            flex-direction: column;
            width: 180rpx;
            height: 80rpx;
            text-align: center;
            font-size: 30rpx;
            margin-top: 10px;
            margin-left: 10rpx;
          }

          .follow {
            display: flex;
            flex-direction: column;
            width: 180rpx;
            height: 80rpx;
            text-align: center;
            font-size: 30rpx;
            margin-top: 10px;
            margin-left: 10rpx;
          }

          .footprint {
            display: flex;
            flex-direction: column;
            width: 180rpx;
            height: 80rpx;
            text-align: center;
            font-size: 30rpx;
            margin-top: 10px;
            margin-left: 10rpx;
          }
        }

        .user_bottom_count {
          height: 240rpx;
          width: 95%;
          background: white;
          margin-top: 20rpx;
          margin-left: 20rpx;

          .count_my_order {
            height: 35%;
            width: 100%;
            border-bottom: 2rpx solid #ccc;
            line-height: 90rpx;

            text {
              width: 100%;
              margin-left: 20rpx;
            }
          }

          .count_my_icon {
            display: flex;
            height: 55%;
            width: 100%;
            text-align: center;
            margin-top: 20rpx;

            .icon_obligation {
              width: 25%;
              height: 90%;
              margin-top: 4rpx;
              font-size: 28rpx;

              .icon_obligation_box1 {
                margin-left: 56rpx;
                width: 74rpx;
                height: 74rpx;
              }

              image {
                width: 100%;
                height: 100%;
              }
            }

            .icon_harvested {
              width: 25%;
              height: 90%;
              margin-top: 4rpx;
              font-size: 28rpx;

              .icon_obligation_box2 {
                margin-left: 56rpx;
                width: 74rpx;
                height: 74rpx;
              }

              image {
                width: 100%;
                height: 100%;
              }
            }

            .icon_refund_and_return {
              width: 25%;
              height: 90%;
              margin-top: 4rpx;
              font-size: 28rpx;

              .icon_obligation_box3 {
                margin-left: 56rpx;
                width: 74rpx;
                height: 74rpx;
              }

              image {
                width: 100%;
                height: 100%;
              }
            }

            .icon_all_orders {
              width: 25%;
              height: 90%;
              margin-top: 4rpx;
              font-size: 28rpx;

              .icon_obligation_box4 {
                margin-left: 56rpx;
                width: 74rpx;
                height: 74rpx;
              }

              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .user_bottom_bottom {
          width: 95%;
          height: 240rpx;
          background-color: white;
          margin-top: 20rpx;
          margin-left: 20rpx;

          .bottom_top {
            height: 33%;
            display: flex;
            justify-content: space-between;

            text {
              width: 100%;
              margin-top: 20rpx;
              margin-left: 20rpx;
              margin-right: 20rpx;
            }

            uni-icons {
              margin-top: 20rpx;
            }
          }

          .bottom_count {
            height: 33%;
            display: flex;
            justify-content: space-between;
            height: 33%;

            text {
              width: 100%;
              margin-top: 20rpx;
              margin-left: 20rpx;
              margin-right: 20rpx;
            }

            uni-icons {
              margin-top: 20rpx;
            }
          }

          .bottom_bottom {
            height: 33%;
            display: flex;
            justify-content: space-between;
            height: 33%;

            text {
              width: 100%;
              margin-top: 20rpx;
              margin-left: 20rpx;
              margin-right: 20rpx;
            }

            uni-icons {
              margin-top: 20rpx;
            }
          }
        }
      }
    }
  }
</style>